<template>
    <div class="goods">
        <div class="menu-wrapper" ref="menuwrapper">
            <ul>
                <li v-for="(item,index) of goods" :key="item.id" class="menu-item" :class="{'current':currentIndex===index}" @click="selectMenu(index,$event)">
                    <span class="text border-1px">
                        <span v-if="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodswrapper">
            <ul>
                <li class="food-list" ref="foodList" v-for="item of goods" :key="item.id">
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li @click="selectFood(food,$event)" v-for="food of item.foods" class="food-item border-1px">
                            <div class="icon">
                                <img width="57" heigth="57" :src="food.icon" alt="">
                            </div>
                            <div class="conten">
                                <h2 class="name">{{food.name}}</h2>
                                <p class="desc" v-if="food.description">{{food.description}}</p>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="new">￥{{food.price}}</span>
                                    <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                                </div>
                                <div class="cartcontrol-wrapper">
                                    <a-cartcontrol @add="addFood" :food="food"></a-cartcontrol>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <a-shopcart ref="shopcart" :select-foods="selectFoods" :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice"></a-shopcart>
        <a-food :food="selectedFood" ref="food"></a-food>
    </div>
</template>

<script>
import shopcart from "./shopcart";
import cartcontrol from "./cartcontrol";
import BSbetter from "better-scroll";
import food from "./food";
const REE_OK = 0;
export default {
  name: "goods",
  data() {
    return {
      goods: [],
      classMap: ["decrease", "discount", "guarantee", "invoice", "special"],
      listHeigth: [],
      scrollY: 0,
      selectedFood: {}
    };
  },
  props: {
    seller: {
      type: Object
    }
  },
  mounted() {
    axios
      .get("./api/data.json")
      .then(re => {
        if (re.data.errno === REE_OK) {
          this.goods = re.data.goods;
          this.$nextTick(() => {
            this._initScript();
            this._calculateHeigth();
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    _initScript() {
      this.meunScript = new BSbetter(this.$refs.menuwrapper, {
        click: true
      });
      this.foodScript = new BSbetter(this.$refs.foodswrapper, {
        click: true,
        probeType: 3
      });
      this.foodScript.on("scroll", pos => {
        this.scrollY = Math.abs(Math.round(pos.y));
      });
    },
    _calculateHeigth() {
      let foodlist = this.$refs.foodList;
      let heigth = 0;
      this.listHeigth.push(heigth);
      for (let i = 0; i < foodlist.length; i++) {
        let item = foodlist[i];
        heigth += item.clientHeight;
        this.listHeigth.push(heigth);
      }
      console.log(this.listHeigth);
    },
    selectMenu(index, event) {
      if (!event._constructed) {
        return;
      }
      let foodlist = this.$refs.foodList;
      let el = foodlist[index];
      this.foodScript.scrollToElement(el, 300);
    },
    addFood(target) {
      this._drop(target);
    },
    _drop(target) {
      // 优化动画效果
      this.$nextTick(() => {
        this.$refs.shopcart.drop(target);
        // console.log(this.$refs.shopcart);
      });
    },
    selectFood(food, event) {
      if (!event._constructed) {
        return;
      }
      this.selectedFood = food;
      this.$refs.food.show();
      console.log(this.$refs.food);
    }
  },
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listHeigth.length; i++) {
        let heigth1 = this.listHeigth[i];
        let heigth2 = this.listHeigth[i + 1];
        if (!heigth2 || (this.scrollY >= heigth1 && this.scrollY < heigth2)) {
          console.log(i);
          return i;
        }
      }
      return 0;
    },
    selectFoods() {
      let foods = [];
      if (this.goods.length > 0) {
      }
      this.goods.forEach(good => {
        good.foods.forEach(food => {
          if (food.count) {
            foods.push(food);
          }
        });
      });
      return foods;
    }
  },
  components: {
    "a-shopcart": shopcart,
    "a-cartcontrol": cartcontrol,
    "a-food": food
  }
};
</script>

<style lang="stylus">
    @import "./../assets/css/mixin.styl"

.goods
    display flex
    position absolute
    top:174px
    bottom:46px;
    width 100%
    overflow hidden
    .menu-wrapper
       flex 0 0 80px
       width 80px;
       background-color #f3f5f7
       .menu-item
          display table
          list-style none
          height 54px
          width 56px
          line-height 14px
          padding 0 12px;
       .current
           position relative
           z-index 10
           margin-top -1px
           background #fff
           font-weight 700

          .icon
              display inline-block
              vertical-align top
              width:12px;
              height:12px;
              margin-right 2px;
              background-size 12px 12px
              background-repeat no-repeat
              &.decrease
                  bg-imge('../assets/img/decrease_3')
              &.discount
                  bg-imge('../assets/img/discount_3')
              &.guarantee
                  bg-imge('../assets/img/guarantee_3')
              &.invoice
                  bg-imge('../assets/img/invoice_3')
              &.special
                  bg-imge('../assets/img/special_3')
          .text
              display table-cell
              width 56px
              vertical-align middle
              border-1px(rgba(7, 17, 27, 0.1))
              font-size 12px
    .foods-wrapper
       flex 1
       .title
         padding-left 14px;
         height 26px
         line-height 26px
         background-color #f3f5f7
         border-left 2px solid #d9dde1
         font-size 12px
         color rgb(147,153,159)
       .food-item
          display flex
          margin 18px
          border-1px(rgba(7,17,27,0.1))
          padding-bottom 18px
          &.last-child
              bg-none()
              padding-bottom 0
          .icon
              flex 0 0 57px
              width 57px
              margin-right 10px;
          .conten
              flex 1
              .name
                margin 2px 0 8px 0
                height 14px
                line-height 14px
                font-size 14px
                color rgb(7,17,27)
              .desc,.extra
                line-height 10px
                color rgb(147,153,159)
              .desc
                 font-size 10px
                 margin-bottom 8px
                 line-height 12px
              .extra > span
                  font-size 10px
              .extra > .count
                 margin-right 12px
              .price
                font-weight 700
                height 24px
                line-height 24px
                .new , .old
                  height 24px
                  line-height 24px
                  color rgb(147,153,159)
                .new
                  font-size 14px
                  margin-right 8px
                  color rgb(240,50,20)
                .old
                   font-size 10px
                   text-decoration line-through
                   color: #93999f;


              .cartcontrol-wrapper
                 position absolute
                 right 0
                 bottom 12px





</style>
